<template>
  <div :style="background" class="bgBackground"></div>
  <div>
    <el-row type="flex" justify="center">
      <!-- gutter 栅格间距 -->
      <el-col :span="10"> </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <!-- gutter 栅格间距 -->
        <!-- span 栅格占的列数，offset是偏移列数 -->
        <el-card shadow="always">
          <h1 class="hh1">用户注册</h1>

          <el-divider></el-divider>

          <el-form
            label-position="top"
            :model="nameValidateForm"
            ref="nameValidateForm"
            label-width="120px"
          >
            <!-- 用户名 -->
            <el-form-item
              label="账号"
              prop="name"
              class="item"
              :rules="[{ required: true, message: '用户名不能为空' }]"
            >
              <el-input
                placeholder=""
                type="text"
                v-model="nameValidateForm.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item
              label="密码"
              prop="password"
              class="item"
              :rules="[{ required: true, message: '密码不能为空' }]"
            >
              <el-input
                placeholder=""
                v-model="nameValidateForm.password"
                show-password
              ></el-input>
            </el-form-item>

            <!-- 确认密码 -->
            <el-form-item
              label="确认密码"
              prop="lastpassword"
              class="item"
              :rules="[{ required: true, message: '确认密码不能为空' }]"
            >
              <el-input
                placeholder=""
                v-model="nameValidateForm.lastpassword"
                show-password
              ></el-input>
            </el-form-item>
          </el-form>

          <el-form-item style="float: right">
            <el-button
              type="primary"
              @click="submitForm('nameValidateForm')"
              round
              >注册</el-button
            >
            <el-button
              type="primary"
              @click="resetForm('nameValidateForm')"
              round
            >
              清空</el-button
            >
            <el-button type="primary" @click="makeweb('nameValidateForm')" round
              >返回</el-button
            >
          </el-form-item>
        </el-card>
    </el-row>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
  name: "Register",
  data() {
    return {
      nameValidateForm: {
        code: "",
        name: "",
        password: "",
        lastpassword: "",
      },
    };
  },
  methods: {
    register_account(formName) {
      this.$axios
        .get("/register", {
          params: {
            username: this.nameValidateForm.name,
            userpassword: this.nameValidateForm.password,
          },
        })
        .then(function (res) {
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    submitForm(formName) {
      this.$refs.nameValidateForm.validate((valid) => {
        if (valid) {
          if (
            this.nameValidateForm.password ===
            this.nameValidateForm.lastpassword
          ) {
            this.register_account();
            this.$axios.get("/registersuccess").then((res) => {
              this.nameValidateForm.code = res["data"]["code"];
              if (this.nameValidateForm.code === "10") {
                ElMessage({
                  message: "您已注册成功！",
                  type: "success",
                });
              } else {
                alert("注册失败，请检查！");
                return false;
              }
            });
          } else {
            alert("密码不一致！");
            return false;
          }
        } else {
          alert("未填写完整！");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs.nameValidateForm.resetFields();
    },
    makeweb() {
      this.$router.push({ path: "/login", name: "Login" });
    },
  },
};
</script>

<style scoped>
.content {
  margin: 0 auto;
}
.el-card {
  width: 500px;
  height: 450px;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.45);
}
.grid-content {
  border-radius: 0px;
  min-height: 200px;
  min-width: 100px;

  text-align: center;
  background-image: url("../assets/Wallpaper.jpg");
  background-size: 100% 100%;
}
.el-row {
  margin-bottom: 150px;
}
.hh1 {
  color: #FDF5E6;
  text-align: center;
}
.bgBackground {
  background: url("../assets/Wallpaper.jpg");
  width: 140%;
  height: 160%;
  position: fixed;
  background-size: 100% 100%;
}
.item .el-form-item__label{
    color: #FFF8DC;
  }
</style>
